<template>
  <div class="bread">
    <div class="breadcontent">
      <div class="breadbox">
        <div
          class="breaditem"
          v-for="item in $store.state.parts"
          :key="item.goods_id"
        >
          <addCar v-if="$store.state.isclickcar">
            <template slot="cancel"
              ><span @click="changeisclickcar">取消</span></template
            >
          </addCar>
          <img
            class="breaditemImg"
            :src="$store.state.url + item.goods_coverimg"
          />
          <h3 class="breadtext1">{{ item.goods_name }}</h3>
          <h4 class="breadtext2">{{ item.goods_english }}</h4>
          <span class="breadprice">
            <div class="pricelement">￥</div>
            {{ item.goods_price }}
            <img
              class="priceImg"
              src="./images/car.png"
              @click="changeisclickcar(item.goods_id)"
            />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import addCar from "../ljy/addcar/addcar.vue";
export default {
  components: {
    addCar,
  },
  filters: {
    tool(n1, n2) {
      return n1 + n2;
    },
  },
  data() {
    return {
      breadtext1: "xxxxx",
      breadtext2: "xxxxx",
      breadprice: "xxxx",
      arr: "",
    };
  },
  async mounted() {
    this.$store.commit("changeTypeNmame", "snack");
  },
  methods: {
    changeisclickcar(goods_id) {
      this.$store.commit("changeGoodsid", goods_id);
      this.$store.commit("changeIsclickcar");
    },
  },
};
</script>

<style scoped>
* {
  text-decoration: none;
}
.bread {
  background-color: #ccc;
}

.breadcontent {
  width: 100%;
  margin: 0 auto 50px;
  background-color: #f8f8f8;
  padding-bottom: 80px;
  padding-top: 160px;
}

.breadbox {
  width: 1480px;
  margin: 0 auto 50px;
  /* height: 200px; */
  display: flex;
  flex-wrap: wrap;
}

.breaditem {
  width: 350px;
  padding-top: 20px;
  margin-left: 16px;
}

.breaditemImg {
  width: 350px;
  height: 350px;
  margin-bottom: 12px;
}

.breadtext1 {
  font-size: 15px;
  color: #000;
  margin-bottom: 6px;
  font-weight: 400;
  text-decoration: none;
}

.breadtext2 {
  font-size: 12px;
  color: #7a7a7a;
  height: 5px;
  margin-bottom: 10px;
  font-weight: normal;
  margin-bottom: 20px;
}

.breadprice {
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  position: relative;
  width: 100%;
  display: inline-block;
}

.pricelement {
  font-size: 15px;
  display: inline-block;
}

.priceImg {
  position: absolute;
  right: 32px;
  bottom: 0px;
}
</style>
